<template>
  <el-dialog
    v-model="toggle"
    v-bind="$attrs"
    modal-class="_basic-dialog"
    append-to-body
    lock-scroll
    top="5vh"
    :show-close="false"
    :class="{ _mobile: isMobile }"
    @open="onOpen"
  >
    <template #header>
      <div
        ref="headerBox"
        :class="{ '_fixed-dialog-header': props.stickyHeader }"
      >
        <div v-if="isMobile" class="_basic-dialog-header-position"></div>
        <div>
          <div
            v-if="!slots.header"
            class="_header"
            :class="{ _mobile: isMobile }"
          >
            <div class="_basic-title">
              <slot v-if="slots.title" name="title" />
              <span>{{ props.title }}</span>
            </div>
            <div
              :class="{ _click: !isMobile, _close: true }"
              style="padding-top: inherit; padding-bottom: inherit"
              @click="toggle = false"
            >
              <img class="w-0.94rem h-0.94rem" :src="Close" />
            </div>
          </div>
          <slot name="header" />
        </div>
      </div>
    </template>

    <div
      v-if="isMobile && props.stickyHeader"
      class="_sticky-position-box"
      :style="{ height: `${headerHeight}px` }"
    ></div>
    <slot />
  </el-dialog>
</template>

<script lang="tsx" setup>
import Close from "@/assets/close.png";
import { useMedia } from "@/hooks/useMedia";

import { basicDialogEmits, basicDialogProps } from "./basicDialog";

const props = defineProps(basicDialogProps);
const emits = defineEmits(basicDialogEmits);

const slots = useSlots();
const isMobile = useMedia();

const headerBox = ref<HTMLDivElement>();
const headerHeight = ref(0);

const toggle = computed({
  get() {
    return props.open;
  },
  set(isOpen: boolean) {
    emits("update:open", isOpen);
  },
});

async function onOpen() {
  await nextTick();
  headerHeight.value = headerBox?.value?.getBoundingClientRect().height;
}
</script>

<style lang="less" scoped>
._basic-dialog-header-position {
  height: var(--realbox-mobile-header-height) !important;
}

._header {
  position: relative;
  @apply flex items-center justify-between text-hex-fff;
  padding: 0.38rem 0 1.38rem;
  &::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.06rem;
    background-color: #464a4b;
    transform: translateY(0.5);
    content: "";
  }
  ._basic-title {
    @apply flex items-center;
    font-size: 1.31rem;
    line-height: 1.31rem;
  }

  ._close {
    @apply absolute top-0 bottom-0 right-0 flex items-center h-full;
  }

  &._mobile {
    @apply p-0;
    height: 3rem;
    padding: 0 1.13rem;
    ._basic-title {
      font-size: 1.13rem;
      line-height: 1.13rem;
    }
    ._close {
      padding: 0 1.31rem 0 0.88rem;
    }
  }
}

._fixed-dialog-header {
  @apply fixed top-0 left-0 z-999 w-full;
  background-color: #232829;
}
</style>

<style lang="less">
._basic-dialog {
  .el-dialog {
    .el-dialog__header {
      padding: 0;
    }
    &._mobile {
      @apply flex flex-col;
      padding: 0 !important;
      .el-dialog__body {
        @apply flex-1 h-0;
      }
    }
  }
}
</style>
